layui.use(['layer', 'echarts', 'element', 'count','laydate'], function() {
    var $ = layui.jquery,
        layer = layui.layer,
        element = layui.element,
        count = layui.count,
        laydate = layui.laydate,
        echarts = layui.echarts;

        laydate.render({
            type: 'date',
            value: new Date(new Date())
        });

        //容器初始化
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
        const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']

        //图表样式定义
        var option = {
            backgroundColor: '#fff',
            tooltip: {
                show: false
            },
            grid: {
                top: '10%',
                bottom: '6%',
                left: '6%',
                right: '6%',
                containLabel: true
            },
            legend: {
                data: ['检测任务数','用户新增'],
                orient: 'horizontal',
                icon: "rect",
                show: true,
                left: 100,
                top: 9,
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    margin: 10,
                    //textStyle: {
                    fontSize: 12,
                    color: 'rgba(#999)'
                    //}
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#939ab6',
                        opacity: .15
                    }
                },
            }, ],
            yAxis: [{
                type: 'value',
                offset: 15,
                max: 20,
                min: 0,
                name: '单位：个',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    margin: 10,
                    //textStyle: {
                    fontSize: 14,
                    color: '#999'
                    //}
                },
                splitLine: {
                    show: false
                }

            }],
            series: [{
                name: '检测任务数',
                type: 'line',
                z: 3,
                showSymbol: false,
                smoothMonotone: 'x',
                lineStyle: {
                    width: 3,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(59,102,246)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(118,237,252)' // 100% 处的颜色
                        }]
                    },
                    shadowBlur: 4,
                    shadowColor: 'rgba(69,126,247,.2)',
                    shadowOffsetY: 4
                },
                areaStyle: {
                    //normal: {
                    color: {
                        name:'1',
                        type: 'linear',
                        x: 0,
                        y: 0,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(227,233,250,.9)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(248,251,252,.3)' // 100% 处的颜色
                        }]
                    }
                    //}
                },
                smooth: true,
            }, {
                name: '用户新增',
                color:'rgb(252,156,171)',
                type: 'line',
                showSymbol: false,
                smoothMonotone: 'x',

                lineStyle: {
                    width: 3,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255,84,108)'
                    }, {
                        offset: 1,
                        color: 'rgba(252,140,118)'
                    }], false),
                    shadowBlur: 4,
                    shadowColor: 'rgba(253,121,128,.2)',
                    shadowOffsetY: 4
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255,84,108,.15)'
                    }, {
                        offset: 1,
                        color: 'rgba(252,140,118,0)'
                    }], false),
                },
                smooth: true,
                },
            ]


        };

        //获取从当前时间为终点的七天
        var time=new Date();
        var datetime=[];
        for(var i = 0; i<7;i++){
            datetime[i] = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + (time.getDate()-6+i);

        }


        //获取后台数据
        $.ajax({
            type: "get",
            url: "/homepage/selectalltask",
            contentType: "\"application/json;charset=utf-8\"",
            success: function (data) {
                console.log("=====data: =======")
                console.log(data);

                for (var i = 0, j = 0, k = 0, m = 0, n = 0, o = 0, p = 0, q = 0; i < data.list.length; i++) {
                    if (layui.util.toDateString(data.list[i].createTime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[0], 'yyyy-MM-dd')) {
                        j++;
                    }
                    if (layui.util.toDateString(data.list[i].createTime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[1], 'yyyy-MM-dd')) {
                        k++;
                    }
                    if (layui.util.toDateString(data.list[i].createTime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[2], 'yyyy-MM-dd')) {
                        m++;
                    }
                    if (layui.util.toDateString(data.list[i].createTime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[3], 'yyyy-MM-dd')) {
                        n++;
                    }
                    if (layui.util.toDateString(data.list[i].createTime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[4], 'yyyy-MM-dd')) {
                        o++;
                    }
                    if (layui.util.toDateString(data.list[i].createTime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[5], 'yyyy-MM-dd')) {
                        p++;
                    }
                    if (layui.util.toDateString(data.list[i].createTime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[6], 'yyyy-MM-dd')) {
                        q++;
                    }
                }

                $.ajax({
                    type: "get",
                    url: "/homepage/selectallusr",
                    contentType: "\"application/json;charset=utf-8\"",
                    success: function (data) {
                        console.log("=====data: =======")
                        console.log(data);

                        for (var i = 0, a = 0, b = 0, c = 0, d = 0, e = 0, f = 0, g = 0; i < data.list.length; i++) {
                            if (layui.util.toDateString(data.list[i].registertime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[0], 'yyyy-MM-dd')) {
                                a++;
                            }
                            if (layui.util.toDateString(data.list[i].registertime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[1], 'yyyy-MM-dd')) {
                                b++;
                            }
                            if (layui.util.toDateString(data.list[i].registertime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[2], 'yyyy-MM-dd')) {
                                c++;
                            }
                            if (layui.util.toDateString(data.list[i].registertime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[3], 'yyyy-MM-dd')) {
                                d++;
                            }
                            if (layui.util.toDateString(data.list[i].registertime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[4], 'yyyy-MM-dd')) {
                                e++;
                            }
                            if (layui.util.toDateString(data.list[i].registertime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[5], 'yyyy-MM-dd')) {
                                f++;
                            }
                            if (layui.util.toDateString(data.list[i].registertime, 'yyyy-MM-dd') === layui.util.toDateString(datetime[6], 'yyyy-MM-dd')) {
                                g++;
                            }
                        }


                        //为图表赋值
                        echartsRecords.setOption({
                            xAxis: {
                                data: datetime,
                            },
                            yAxis: {},
                            series: [{
                                // 根据名字对应到相应的系列
                                data: [j, k, m, n, o, p, q]

                            },{
                                data: [a, b, c, d, e, f, g]
                            }]
                        });
                    }

                });
            }
        });

        echartsRecords.setOption(option);

        window.onresize = function() {
            echartsRecords.resize();
        }

});